<template>
  <div>
    <el-button type="primary" @click="change">切换组件</el-button>

    <div class="myDiv">
      <span>keep-alive</span>
      <!--keep-alive 缓存组件（使其不被销毁）-->
      <!--  属性
            is ： 表示要渲染的组件名字
            include ：要缓存的组件
            exclude  ：不被缓存的组件
      -->
      <keep-alive include='left'>
        <component :is="myName"></component>
      </keep-alive>
    </div>

    <div class="myDiv" style = "margin-top:15px">
      <span>slot</span>
      <!--插槽的使用-->
      <!-- 默认 会被填充到default插槽   v-slot只能用在组件或template中
          注意 v-slot 后的空格问题
          简写 v-slot:my100 相当于 #my100
      -->
      <my-left>

        <template v-slot:my100>
          <p>this is a book</p>
        </template>

        <template #my200="scope">
          <h3>msg-----{{ scope.msg }}</h3>
          <h3>user-----{{ scope.user }}</h3>
        </template>

        <!-- 解构  -->
        <template #my300="{msg,user}">
          <h3> msg-----{{ msg }}</h3>
          <h3> name-----{{ user.name }}</h3>
        </template>

      </my-left>
    </div>
  </div>
</template>

<script>
import left from './left'
import right from './right'

export default {
  name: "keepAliveTest",
  components: {
    'my-left': left,
    'my-right': right,
  },
  data() {
    return {
      isShow: true,
      myName: 'my-left'
    }
  },
  methods: {
    change() {
      this.isShow = !this.isShow
      this.myName = this.isShow ? 'my-left' : 'my-right'
    }
  },

}
</script>

<style scoped>
.el-button {
  margin: 15px;
}

.myDiv {
  padding-top: 50px;
  height: 300px;
  width: 800px;
  border: 1px solid blue;
  margin: 0 auto;
}
</style>
